<section class="todoapp">
  <header class="header">
    <h1>todos</h1>
    <input class="new-todo"
     (keyup.enter)="addTodo($event)"
      placeholder="What needs to be done?"
      [appAutofocus]="true"
      >
  </header>
  <!-- This section should be hidden by default and shown when there are todos -->
  <ng-template [ngIf]="todos.length">
  <section class="main" >
    <input id="toggle-all"  class="toggle-all" type="checkbox" 
       [checked]="allcompleted"
       (change)="allcompleted = $event.target.checked"
    >
    <label for="toggle-all">Mark all as complete</label>
    <ul class="todo-list">
      <!-- These are here just to show the structure of the list items -->
      <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
      <li 
      *ngFor="let todo of newTodos;let i=index"
      [ngClass]="{'completed': todo.iscompleted,'editing':isediting ==todo.id}"
       >
        <div class="view">
          <input class="toggle"
          type="checkbox"
          [(ngModel)]="todo.iscompleted"
           >
          <label  (dblclick)="edit(todo.id)" >{{todo.title}}</label>
          <button class="destroy"
          (click)="delectTodo(i)"
          ></button>
        </div>
        <input class="edit"  value="{{todo.title}}"
         (blur)="saveEdit($event,todo)" 
         (keyup.enter)="saveEdit($event,todo)"
         (keyup)="cancelEdit($event,todo)"
         [appAutofocus]="isediting ==todo.id"
         >
      </li>
    </ul>
  </section>
  <!-- This footer should hidden by default and shown when there are todos -->
  <footer class="footer" >
    <!-- This should be `0 items left` by default -->
    <span class="todo-count"><strong>{{ remaningCount }}</strong> item left</span>
    <!-- Remove this if you don't implement routing -->
    <ul class="filters">
      <li>
        <a [ngClass]="{
          selected: visibility === 'all'
        }" href="#/">All</a>
      </li>
      <li>
        <a [ngClass]="{
          selected: visibility === 'active'
        }" href="#/active">Active</a>
      </li>
      <li>
        <a [ngClass]="{
          selected: visibility === 'completed'
        }" href="#/completed">Completed</a>
      </li>
    </ul>
    <!-- Hidden if no completed items are left ↓ -->
    <button *ngIf="completedCount" class="clear-completed" (click)="delectAll()">Clear completed</button>
  </footer>
  </ng-template>
</section>

<footer class="info">
  <p>Double-click to edit a todo</p>
  <!-- Remove the below line ↓ -->
  <p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
  <!-- Change this out with your name and url ↓ -->
  <p>Created by <a href="http://todomvc.com">you</a></p>
  <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
